<template>
  <div class="page">
    <div class="page__left">
      <div class="img-pk">
        <div class="img-box">
          <img :src="imgGroupList[activeIndex].img" class="img" />
          <div v-if="loadingImg" class="scan-line"></div>
        </div>

        <div class="tip">
          <i class="icon-information-fill iconfont"></i>
          经过技术处理,Demo样例仅用于浏览展示
        </div>
      </div>
      <div class="img-select">
        <div
          v-for="(item, index) in imgGroupList"
          :key="item.key"
          class="img-group-item"
          :class="{ active: index === activeIndex }"
          @click="changeImg(item.key, index)"
        >
          <img :src="item.img" alt="" class="img" />
        </div>
      </div>
    </div>
    <div class="page__right">
      <div class="response-title">
        <span>分析结果</span
        ><span :class="{ 'rotate-icon': !isAnalysis }">
          <i class="icon-arrow-down-s-line iconfont cursor-pointer" @click="toggleAnalysis"></i
        ></span>
      </div>
      <transition>
        <div v-show="isAnalysis" class="response-result">
          <div v-if="showObj.resultText">
            <i class="icon-arrow-right-s-fill iconfont"></i>
            {{ showObj.resultText.split('，')[0] }}
            {{ showObj.resultText.split('，')[1] }}
          </div>
        </div>
      </transition>

      <div class="response-title">
        <span>Response</span
        ><span :class="{ 'rotate-icon': !isResponseOpen }">
          <i class="icon-arrow-down-s-line iconfont cursor-pointer" @click="toggleResponse"></i
        ></span>
      </div>
      <transition
        ><div v-show="isResponseOpen" class="response-body">
          <div>
            {{ showObj.responseText }}
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onUnmounted, reactive, ref } from 'vue'
  import { useRequest } from 'vue-request'

  import { itemCaseApi } from '@/services/api'

  import imgSet1 from './01.jpeg'
  import imgSet2 from './02.jpeg'
  import imgSet3 from './03.png'
  import imgSet4 from './04.jpg'

  let selectedImages = ref<string>('imgSet1')
  const showObj = reactive({
    result: true,
    response: true,
    resultText: '',
    responseText: ''
  })

  const imgGroupList = ref([
    {
      img: imgSet1,
      key: 'imgSet1'
    },
    {
      img: imgSet2,
      key: 'imgSet2'
    },
    {
      img: imgSet3,
      key: 'imgSet3'
    },
    {
      img: imgSet4,
      key: 'imgSet4'
    }
  ])
  const activeIndex = ref(0)
  const isResponseOpen = ref(true)
  const isAnalysis = ref(true)
  const timerId = ref()

  const changeImg = (key: string, index: number) => {
    showObj.responseText = ''
    showObj.resultText = ''
    activeIndex.value = index
    loadingImg.value = true

    timerId.value = setTimeout(() => {
      getOnlineExperienceRun({
        info: randomizeString(selectedImages.value)
      })
    }, 1500)
  }
  const toggleResponse = () => {
    isResponseOpen.value = !isResponseOpen.value
  }
  const toggleAnalysis = () => {
    isAnalysis.value = !isAnalysis.value
  }

  const resultText = ref('')
  const responseText = ref('')
  const loadingImg = ref(false)

  const { runAsync: getOnlineExperienceRun } = useRequest<ResponseData<any>>(itemCaseApi.getOnlineExperience, {
    onSuccess: ({ data }) => {
      console.log(data)

      loadingImg.value = false

      switch (activeIndex.value) {
        case 0:
          resultText.value = '上半身衣服颜色为白色'

          responseText.value = `
      ..\\test_data/01.jpeg
      ['white', '80.26%']
      ['grey', '7.80%']
      ['red', '6.95%']
      ['blue', '3.88%']
      ['orange', '0.57%']
      ['black', '0.29%']
      ['yellow', '0.00%']
      ['green', '0.00%']
      ['cyan', '0.00%']
      ['purple', '0.00%']`
          break
        case 1:
          resultText.value = '上半身衣服颜色为蓝色'
          responseText.value = `
      ..\\test_data/02.jpeg
      ['blue', '80.73%']
      ['red', '8.72%']
      ['grey', '5.09%']
      ['black', '2.66%']
      ['purple', '2.40%']
      ['orange', '0.24%']
      ['green', '0.08%']
      ['cyan', '0.03%']
      ['white', '0.02%']
      ['yellow', '0.02%']`
          break
        case 2:
          resultText.value = '上半身衣服颜色为深灰色'
          responseText.value = `
      ..\\test_data/03.png
      ['grey', '54.13%']
      ['black', '41.97%']
      ['white', '3.82%']
      ['purple', '0.06%']
      ['blue', '0.01%']
      ['red', '0.00%']
      ['orange', '0.00%']
      ['yellow', '0.00%']
      ['green', '0.00%']
      ['cyan', '0.00%']
      ['white', '8.37%']

      ['grey', '43.86%']
      ['red', '4.57%']
      ['orange', '23.54%']
      ['black', '18.28%']
      ['purple', '1.31%']
      ['blue', '0.07%']
      ['yellow', '0.00%']
      ['green', '0.00%']
      ['cyan', '0.00%']
      `
          break
        case 3:
          resultText.value = '上半身衣服颜色为蓝色'
          responseText.value = `
      ..\\test_data/04.jpg
      ['blue', '87.12%']
      ['red', '4.62%']
      ['grey', '4.41%']
      ['white', '3.52%']
      ['black', '0.14%']
      ['purple', '0.11%']
      ['orange', '0.05%']
      ['yellow', '0.00%']
      ['green', '0.00%']
      ['cyan', '0.00%']
      `
          break
        default:
          resultText.value = 'Default Result'
          responseText.value = ''
          break
      }
      showObj.resultText = resultText.value
      showObj.responseText = responseText.value
    }
  })
  //参数加密
  const randomizeString = (str: string) => {
    // 将字符串拆分为字符数组
    const charArray = str.split('')
    // 使用随机数对字符数组进行重新排列
    for (let i = charArray.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      ;[charArray[i], charArray[j]] = [charArray[j], charArray[i]]
    }
    // 将字符数组组合为字符串
    return charArray.join('')
  }
  getOnlineExperienceRun({
    info: randomizeString(selectedImages.value)
  })
  onUnmounted(() => {
    clearTimeout(timerId.value)
  })
</script>

<style lang="less" scoped>
  .page {
    display: flex;
    overflow: hidden;
    width: 1376px;
    height: 552px;
    border: 1px solid #d9d9db;
    border-radius: 8px;

    .page__left {
      display: flex;
      width: 872px;
      background: #f7f7fa;
      flex-direction: column;

      .result {
        height: 72px;
        text-align: center;
        background-color: #f7f8fa;

        .title {
          padding-top: 6px;
          font-weight: 500;
          font-size: 20px;
          line-height: 150%;
        }

        .des {
          margin-top: 4px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
        }
      }

      .img-pk {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 24px;
        height: 416px;
        background-color: #f7f8fa;
        flex-wrap: wrap;

        .img-box {
          @keyframes scan {
            0% {
              height: 0;
              opacity: 0;
              background-image: linear-gradient(to bottom, transparent, rgba(27, 27, 255, 0.1));
              border-bottom: 2px solid rgba(27, 27, 255, 0.1);
            }

            60% {
              height: 80%;
              opacity: 1;
              background-image: linear-gradient(to bottom, transparent, rgba(27, 27, 255, 0.1));
              border-bottom: 2px solid rgba(27, 27, 255, 0.8);
            }

            70% {
              height: 100%;
              opacity: 1;
              background-image: transparent;
              border-bottom: 2px solid rgba(27, 27, 255, 0);
            }

            71% {
              height: 0;
              opacity: 0;
              background-image: linear-gradient(to bottom, transparent, rgba(27, 27, 255, 0.1));
              border-bottom: 2px solid rgba(27, 27, 255, 0.1);
            }
          }

          position: relative;
          overflow: hidden;
          width: 100%;
          height: 340px;
          background: #fff;
          border: 1px solid #e8e8eb;
          border-radius: 4px;

          .img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }

          .scan-line {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 20;
            width: 100%;
            height: 0;
            opacity: 0;
            animation: scan 1s linear infinite normal;
          }
        }

        .icon {
          position: absolute;
          top: 156px;
          left: 50%;
          z-index: 10;
          width: 44px;
          height: 34px;
          transform: translateX(-50%);
        }

        .tip {
          display: flex;
          align-items: center;
          margin-top: 8px;
          width: 100%;
          height: 22px;
          color: rgba(25, 25, 48, 0.36);
          line-height: 22px;
          gap: 8px;
        }
      }

      .img-select {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 24px;
        background: #fff;
        border-top: 1px solid #d9d9db;

        .img-group-item {
          display: flex;
          width: 176px;
          height: 104px;
          border: 1px solid #c4c4c7;
          border-radius: 4px;
          cursor: pointer;

          .img {
            width: 100%;
            object-fit: cover;
          }

          &.active {
            border: 3px solid #1868e9;
          }
        }
      }
    }

    .page__right {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-left: 1px solid #d9d9db;
      background: #f7f7fa;

      .response-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px 8px 24px;
        width: 504px;
        height: 38px;
        font-size: 14px;
        color: rgba(25, 25, 48, 0.75);
        background: #f5f5f5;
        border-bottom: 1px solid #d9d9db;
        font-weight: 700;
        line-height: 22px;
      }

      .response-result {
        // flex: 1;
        height: 162px;
        background-color: #fff;
        transition: all 0.4s;
        border-bottom: 1px solid #d9d9db;

        & > div {
          padding: 24px;
          white-space: pre-wrap;
          line-height: 24px;
        }
      }

      .response-body {
        overflow-y: auto;
        background-color: #fff;
        transition: all 0.4s;
        flex: 1;

        & > div {
          padding: 24px;
          white-space: pre-wrap;
          line-height: 24px;
        }
      }

      .rotate-icon {
        transform: rotate(180deg);
        transition: transform 0.3s;
      }

      .transition-max-h {
        max-height: 0;
        transition: max-height 0.5s ease-out;
      }
    }
  }
</style>
